<% @page_title = "Setup Security Key" %>

<%== part("components/page_header", title: "My Account") %>

<main>
  <div class="max-w-screen-xl pb-6 lg:pb-16">
    <div class="overflow-hidden rounded-lg bg-white shadow">
      <div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-x lg:divide-y-0">
        <%== render("account/submenu") %>
        <div class="divide-y divide-gray-200 lg:col-span-8 xl:col-span-9 2xl:col-span-10 pb-10">
          <div class="px-4 py-6 sm:p-6 lg:pb-8 space-y-4">
            <h2 class="text-lg font-medium leading-6 text-gray-900">Setup Security Key</h2>
            <form
              action="/<%= rodauth.webauthn_setup_route %>"
              role="form"
              method="POST"
              id="webauthn-setup-form"
              data-credential-options="<%= (cred = rodauth.new_webauthn_credential).as_json.to_json %>"
            >
              <%== rodauth.webauthn_setup_additional_form_tags %>
              <%== rodauth.csrf_tag("/" + rodauth.webauthn_setup_route) %>
              <%== part("components/form/hidden", name: rodauth.webauthn_setup_challenge_param, value: cred.challenge) %>
              <%== part(
                "components/form/hidden",
                name: rodauth.webauthn_setup_challenge_hmac_param,
                value: rodauth.compute_hmac(cred.challenge)
              ) %>
              <input id="webauthn-setup" class="hidden" type="text" name="<%= rodauth.webauthn_setup_param %>" value="" hidden/>
              <div class="mt-6 grid grid-cols-6 gap-6">
                <div class="col-span-6 sm:col-span-3 xl:col-span-2">
                  <%== part("components/form/text", name: "name", label: "Key Name", attributes: { required: true }) %>
                </div>
                <% if rodauth.two_factor_modifications_require_password? %>
                  <div class="col-span-6 sm:col-span-3 xl:col-span-2">
                    <%== render("components/rodauth/password_field") %>
                  </div>
                <% end %>
                <div class="col-span-6">
                  <div id="webauthn-setup-button">
                    <%== part("components/form/submit_button", text: rodauth.webauthn_setup_button) %>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
<script src="<%= "#{rodauth.webauthn_js_host}#{rodauth.webauthn_setup_js_path}" %>"></script>
